<!DOCTYPE html>
<html>
<head>
  <!-- Standard Meta -->
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">

<link rel="image_src" type="image/jpeg" href="/images/logo.png" />

<!-- Site Properities -->
<meta name="generator" content="DocPad v6.79.4" />
<title>Search | Semantic UI</title>

<meta name="description" content="A search module allows a user to query for results from a selection of data" />
<meta name="keywords" content="html5, ui, library, framework, javascript" />
  
  <script src="/javascript/library/detect.min.js"></script>
  <script src="/javascript/library/jquery.min.js"></script>
  <script src="/javascript/library/clipboard.min.js"></script>
  <script src="/javascript/library/cookie.min.js"></script>
  <script src="/javascript/library/easing.min.js"></script>
  <script src="/javascript/library/highlight.min.js"></script>
  <script src="/javascript/library/history.min.js"></script>
  <script src="/javascript/library/state.js"></script>
  <script src="/javascript/library/tablesort.min.js"></script>
  <script src="/javascript/library/underscore.min.js"></script>





<script src="/dist/semantic.min.js"></script>



<script src="/javascript/docs.js"></script>

  
<link rel="stylesheet" type="text/css" class="ui" href="/dist/semantic.min.css">




<link rel="stylesheet" type="text/css" href="/stylesheets/docs.css">
<link rel="stylesheet" type="text/css" href="/stylesheets/rtl.css">





  
<script>
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

  ga('create', 'UA-44039803-2', 'auto');
  ga('send', 'pageview');
</script>

  
<script type="text/javascript">
  window.liveSettings = {
    api_key    : '9ede3015b9f84c1aabc81ab839c55d74',
    parse_attr : [
      'data-title',
      'data-content'
    ],
    detectlang   : false,
    autocollect  : true,
    ignore_tags  : ['i', 'code', 'pre'],
    parse_attr   : ['data-title', 'data-content', 'data-text'],
    ignore_class : ['code', 'anchor']
  };
</script>
<script type="text/javascript" src="//cdn.transifex.com/live.js"></script>


</head>
<body id="example" class="" ontouchstart="">
  
  <div class="ui vertical inverted sidebar menu" id="toc">
  








<div class="item">
  <a class="ui logo icon image" href="/">
    <img src="/images/logo.png">
  </a>
  <a href="/"><b>UI Docs</b></a>
</div>
<a class="item" href="/introduction/getting-started.html">
  <b>Getting Started</b>
</a>
<a class="item" href="/introduction/new.html">
  <b>New in 2.4</b>
</a>
<div class="item">
  <div class="header">Introduction</div>
  <div class="menu">
    
      <a class="item" href="/introduction/integrations.html">
        Integrations
      </a>
    
      <a class="item" href="/introduction/build-tools.html">
        Build Tools
      </a>
    
      <a class="item" href="/introduction/advanced-usage.html">
        Recipes
      </a>
    
      <a class="item" href="/introduction/glossary.html">
        Glossary
      </a>
    
  </div>
</div>
<div class="item">
  <div class="header">Usage</div>
  <div class="menu">
    
      <a class="item" href="/usage/theming.html">
        Theming
      </a>
    
      <a class="item" href="/usage/layout.html">
        Layouts
      </a>
    
  </div>
</div>
<div class="item">
  <div class=" header">Globals</div>
  <div class="menu">
    
      <a class="item" href="/globals/reset.html">
        Reset
        
      </a>
    
      <a class="item" href="/globals/site.html">
        Site
        
      </a>
    
  </div>
</div>
<div class="item">
  <div class=" header">Elements</div>
  <div class="menu">
    
      <a class="item" href="/elements/button.html">
        Button
        
      </a>
    
      <a class="item" href="/elements/container.html">
        Container
        
      </a>
    
      <a class="item" href="/elements/divider.html">
        Divider
        
      </a>
    
      <a class="item" href="/elements/flag.html">
        Flag
        
      </a>
    
      <a class="item" href="/elements/header.html">
        Header
        
      </a>
    
      <a class="item" href="/elements/icon.html">
        Icon
        
      </a>
    
      <a class="item" href="/elements/image.html">
        Image
        
      </a>
    
      <a class="item" href="/elements/input.html">
        Input
        
      </a>
    
      <a class="item" href="/elements/label.html">
        Label
        
      </a>
    
      <a class="item" href="/elements/list.html">
        List
        
      </a>
    
      <a class="item" href="/elements/loader.html">
        Loader
        
      </a>
    
      <a class="item" href="/elements/placeholder.html">
        Placeholder
        
      </a>
    
      <a class="item" href="/elements/rail.html">
        Rail
        
      </a>
    
      <a class="item" href="/elements/reveal.html">
        Reveal
        
      </a>
    
      <a class="item" href="/elements/segment.html">
        Segment
        
      </a>
    
      <a class="item" href="/elements/step.html">
        Step
        
      </a>
    
  </div>
</div>
<div class="item">
  <div class=" header">Collections</div>
  <div class="menu">
    
      <a class="item" href="/collections/breadcrumb.html">
        Breadcrumb
        
      </a>
    
      <a class="item" href="/collections/form.html">
        Form
        
      </a>
    
      <a class="item" href="/collections/grid.html">
        Grid
        
      </a>
    
      <a class="item" href="/collections/menu.html">
        Menu
        
      </a>
    
      <a class="item" href="/collections/message.html">
        Message
        
      </a>
    
      <a class="item" href="/collections/table.html">
        Table
        
      </a>
    
  </div>
</div>
<div class="item">
  <div class=" header">Views</div>
  <div class="menu">
    
      <a class="item" href="/views/advertisement.html">
        Advertisement
        
      </a>
    
      <a class="item" href="/views/card.html">
        Card
        
      </a>
    
      <a class="item" href="/views/comment.html">
        Comment
        
      </a>
    
      <a class="item" href="/views/feed.html">
        Feed
        
      </a>
    
      <a class="item" href="/views/item.html">
        Item
        
      </a>
    
      <a class="item" href="/views/statistic.html">
        Statistic
        
      </a>
    
  </div>
</div>
<div class="item">
  <div class="active  header">Modules</div>
  <div class="menu">
    
      <a class="item" href="/modules/accordion.html">
        Accordion
        
      </a>
  
      <a class="item" href="/modules/checkbox.html">
        Checkbox
        
      </a>
  
      <a class="item" href="/modules/dimmer.html">
        Dimmer
        
      </a>
  
      <a class="item" href="/modules/dropdown.html">
        Dropdown
        
      </a>
  
      <a class="item" href="/modules/embed.html">
        Embed
        
      </a>
  
      <a class="item" href="/modules/modal.html">
        Modal
        
      </a>
  
      <a class="item" href="/modules/popup.html">
        Popup
        
      </a>
  
      <a class="item" href="/modules/progress.html">
        Progress
        
      </a>
  
      <a class="item" href="/modules/rating.html">
        Rating
        
      </a>
  
      <a class="active item" href="/modules/search.html">
        Search
        
      </a>
  
      <a class="item" href="/modules/shape.html">
        Shape
        
      </a>
  
      <a class="item" href="/modules/sidebar.html">
        Sidebar
        
      </a>
  
      <a class="item" href="/modules/sticky.html">
        Sticky
        
      </a>
  
      <a class="item" href="/modules/tab.html">
        Tab
        
      </a>
  
      <a class="item" href="/modules/transition.html">
        Transition
        
      </a>
  
  </div>
</div>
<div class="item">
  <div class=" header">Behaviors</div>
  <div class="menu">
    
      <a class="item" href="/behaviors/api.html">
        API
        
      </a>
    
      <a class="item" href="/behaviors/form.html">
        Form Validation
        
      </a>
    
      <a class="item" href="/behaviors/visibility.html">
        Visibility
        
      </a>
    
  </div>
</div>

</div>

<div class="ui black big launch right attached fixed button">
  <i class="content icon"></i>
  <span class="text">Menu</span>
</div>
  




<div class="ui fixed inverted main menu">
  <div class="ui container">
    <a class="launch icon item">
      <i class="content icon"></i>
    </a>
    
      <div class="item">
        Search
      </div>
    
    <div class="right menu">
      
      <div class="vertically fitted borderless item">
        <iframe class="github" src="//ghbtns.com/github-btn.html?user=semantic-org&amp;repo=semantic-ui&amp;type=watch&amp;count=true" allowtransparency="true" frameborder="0" scrolling="0" width="100" height="20"></iframe>
      </div>
      
      <!--
      <div class="item">
        <div class="ui hidden right aligned search input" id="search">
          <div class="ui transparent icon input">
            <input class="prompt" type="text" placeholder="Search...">
            <i class="inverted search link icon" data-content="Search UI"></i>
          </div>
          <div class="results"></div>
        </div>
      </div>
      -->
    </div>
  </div>
</div>

  <div class="pusher">
    <div class="full height">
      <div class="toc">
        <div class="ui vertical inverted menu">
          








<div class="item">
  <a class="ui logo icon image" href="/">
    <img src="/images/logo.png">
  </a>
  <a href="/"><b>UI Docs</b></a>
</div>
<a class="item" href="/introduction/getting-started.html">
  <b>Getting Started</b>
</a>
<a class="item" href="/introduction/new.html">
  <b>New in 2.4</b>
</a>
<div class="item">
  <div class="header">Introduction</div>
  <div class="menu">
    
      <a class="item" href="/introduction/integrations.html">
        Integrations
      </a>
    
      <a class="item" href="/introduction/build-tools.html">
        Build Tools
      </a>
    
      <a class="item" href="/introduction/advanced-usage.html">
        Recipes
      </a>
    
      <a class="item" href="/introduction/glossary.html">
        Glossary
      </a>
    
  </div>
</div>
<div class="item">
  <div class="header">Usage</div>
  <div class="menu">
    
      <a class="item" href="/usage/theming.html">
        Theming
      </a>
    
      <a class="item" href="/usage/layout.html">
        Layouts
      </a>
    
  </div>
</div>
<div class="item">
  <div class=" header">Globals</div>
  <div class="menu">
    
      <a class="item" href="/globals/reset.html">
        Reset
        
      </a>
    
      <a class="item" href="/globals/site.html">
        Site
        
      </a>
    
  </div>
</div>
<div class="item">
  <div class=" header">Elements</div>
  <div class="menu">
    
      <a class="item" href="/elements/button.html">
        Button
        
      </a>
    
      <a class="item" href="/elements/container.html">
        Container
        
      </a>
    
      <a class="item" href="/elements/divider.html">
        Divider
        
      </a>
    
      <a class="item" href="/elements/flag.html">
        Flag
        
      </a>
    
      <a class="item" href="/elements/header.html">
        Header
        
      </a>
    
      <a class="item" href="/elements/icon.html">
        Icon
        
      </a>
    
      <a class="item" href="/elements/image.html">
        Image
        
      </a>
    
      <a class="item" href="/elements/input.html">
        Input
        
      </a>
    
      <a class="item" href="/elements/label.html">
        Label
        
      </a>
    
      <a class="item" href="/elements/list.html">
        List
        
      </a>
    
      <a class="item" href="/elements/loader.html">
        Loader
        
      </a>
    
      <a class="item" href="/elements/placeholder.html">
        Placeholder
        
      </a>
    
      <a class="item" href="/elements/rail.html">
        Rail
        
      </a>
    
      <a class="item" href="/elements/reveal.html">
        Reveal
        
      </a>
    
      <a class="item" href="/elements/segment.html">
        Segment
        
      </a>
    
      <a class="item" href="/elements/step.html">
        Step
        
      </a>
    
  </div>
</div>
<div class="item">
  <div class=" header">Collections</div>
  <div class="menu">
    
      <a class="item" href="/collections/breadcrumb.html">
        Breadcrumb
        
      </a>
    
      <a class="item" href="/collections/form.html">
        Form
        
      </a>
    
      <a class="item" href="/collections/grid.html">
        Grid
        
      </a>
    
      <a class="item" href="/collections/menu.html">
        Menu
        
      </a>
    
      <a class="item" href="/collections/message.html">
        Message
        
      </a>
    
      <a class="item" href="/collections/table.html">
        Table
        
      </a>
    
  </div>
</div>
<div class="item">
  <div class=" header">Views</div>
  <div class="menu">
    
      <a class="item" href="/views/advertisement.html">
        Advertisement
        
      </a>
    
      <a class="item" href="/views/card.html">
        Card
        
      </a>
    
      <a class="item" href="/views/comment.html">
        Comment
        
      </a>
    
      <a class="item" href="/views/feed.html">
        Feed
        
      </a>
    
      <a class="item" href="/views/item.html">
        Item
        
      </a>
    
      <a class="item" href="/views/statistic.html">
        Statistic
        
      </a>
    
  </div>
</div>
<div class="item">
  <div class="active  header">Modules</div>
  <div class="menu">
    
      <a class="item" href="/modules/accordion.html">
        Accordion
        
      </a>
  
      <a class="item" href="/modules/checkbox.html">
        Checkbox
        
      </a>
  
      <a class="item" href="/modules/dimmer.html">
        Dimmer
        
      </a>
  
      <a class="item" href="/modules/dropdown.html">
        Dropdown
        
      </a>
  
      <a class="item" href="/modules/embed.html">
        Embed
        
      </a>
  
      <a class="item" href="/modules/modal.html">
        Modal
        
      </a>
  
      <a class="item" href="/modules/popup.html">
        Popup
        
      </a>
  
      <a class="item" href="/modules/progress.html">
        Progress
        
      </a>
  
      <a class="item" href="/modules/rating.html">
        Rating
        
      </a>
  
      <a class="active item" href="/modules/search.html">
        Search
        
      </a>
  
      <a class="item" href="/modules/shape.html">
        Shape
        
      </a>
  
      <a class="item" href="/modules/sidebar.html">
        Sidebar
        
      </a>
  
      <a class="item" href="/modules/sticky.html">
        Sticky
        
      </a>
  
      <a class="item" href="/modules/tab.html">
        Tab
        
      </a>
  
      <a class="item" href="/modules/transition.html">
        Transition
        
      </a>
  
  </div>
</div>
<div class="item">
  <div class=" header">Behaviors</div>
  <div class="menu">
    
      <a class="item" href="/behaviors/api.html">
        API
        
      </a>
    
      <a class="item" href="/behaviors/form.html">
        Form Validation
        
      </a>
    
      <a class="item" href="/behaviors/visibility.html">
        Visibility
        
      </a>
    
  </div>
</div>

        </div>
      </div>
      <div class="article">
        <link rel="stylesheet/less" type="text/css" href="/src/definitions/modules/search.less" />
<script src="/javascript/search.js"></script>



<div class="ui masthead vertical tab segment">
  <div class="ui container">
    <div class="introduction">

      <h1 class="ui header">
        Search
        
        <div class="sub header">
          
          <a class="twitter-share-button twitter"
            href="http://twitter.com/share"
            data-text="Semantic UI is a next generation UI framework"
            data-url="http://semantic-ui.com"
            data-via="semanticui">
          </a>
          <script type="text/javascript">
          window.twttr=(function(d,s,id){var t,js,fjs=d.getElementsByTagName(s)[0];if(d.getElementById(id)){return}js=d.createElement(s);js.id=id;js.src="https://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);return window.twttr||(t={_e:[],ready:function(f){t._e.push(f)}})}(document,"script","twitter-wjs"));
          </script>
          <iframe class="github" src="//ghbtns.com/github-btn.html?user=semantic-org&amp;repo=semantic-ui&amp;type=watch&amp;count=true" allowtransparency="true" frameborder="0" scrolling="0" width="100" height="20"></iframe>
          
          A search module allows a user to query for results from a selection of data
        </div>
      </h1>

      <div class="ui hidden divider"></div>

      <div class="ui right floated main menu">
        <a class="bug popup icon item" data-content="Edit This Page" href="https://github.com/Semantic-Org/Semantic-UI-Docs/edit/master/server/documents/modules/search.html.eco">
          <i class="edit icon"></i>
        </a>
        
        <a class="bug popup icon item" data-content="Submit Bug Report" href="https://github.com/Semantic-Org/Semantic-UI/issues/new?title=[Search] - Your Bug Name&body=**Steps to Reproduce**%0A1. Do something%0A2. Do something else.%0A3. Do one last thing.%0A%0A**Expected**%0AThe Search should do this%0A%0A**Result**%0AThe Search does not do this%0A%0A**Testcase**%0A(fork this to get started)%0Ahttp://jsfiddle.net/rduvhn8u/1/">
          <i class="bug icon"></i>
        </a>
        
        <a class="github popup icon item" data-content="View project on GitHub" href="https://github.com/Semantic-Org/Semantic-UI">
          <i class="alternate github icon"></i>
        </a>
      </div>
      <div class="ui right floated main menu">
        <a class="music popup icon item" data-content="Play Music">
          <i class="music icon"></i>
        </a>
        <div class="ui language dropdown right floating icon item" id="languages" data-content="Select Language">
          <i class="world icon"></i>
          <div class="menu">
            <div class="header">Select Language</div>
            <div class="ui icon search input">
              <i class="search icon"></i>
              <input type="text" placeholder="Search languages...">
            </div>
            <div class="scrolling menu">
  <div class="item" data-percent="100" data-value="en" data-english="English">
    <span class="description">English</span>
    English
  </div>
  <div class="item" data-percent="94" data-value="da" data-english="Danish">
    <span class="description">dansk</span>
    Danish
  </div>
  <div class="item" data-percent="94" data-value="es" data-english="Spanish">
    <span class="description">Español</span>
    Spanish
  </div>
  <div class="item" data-percent="34" data-value="zh" data-english="Chinese">
    <span class="description">简体中文</span>
    Chinese
  </div>
  <div class="item" data-percent="54" data-value="zh_TW" data-english="Chinese (Taiwan)">
    <span class="description">中文 (臺灣)</span>
    Chinese (Taiwan)
  </div>
  <div class="item" data-percent="79" data-value="fa" data-english="Persian">
    <span class="description">پارسی</span>
    Persian
  </div>
  <div class="item" data-percent="41" data-value="fr" data-english="French">
    <span class="description">Français</span>
    French
  </div>
  <div class="item" data-percent="37" data-value="el" data-english="Greek">
    <span class="description">ελληνικά</span>
    Greek
  </div>
  <div class="item" data-percent="37" data-value="ru" data-english="Russian">
    <span class="description">Русский</span>
    Russian
  </div>
  <div class="item" data-percent="36" data-value="de" data-english="German">
    <span class="description">Deutsch</span>
    German
  </div>
  <div class="item" data-percent="23" data-value="it" data-english="Italian">
    <span class="description">Italiano</span>
    Italian
  </div>
  <div class="item" data-percent="21" data-value="nl" data-english="Dutch">
    <span class="description">Nederlands</span>
    Dutch
  </div>
  <div class="item" data-percent="19" data-value="pt_BR" data-english="Portuguese">
    <span class="description">Português(BR)</span>
    Portuguese
  </div>
  <div class="item" data-percent="17" data-value="id" data-english="Indonesian">
    <span class="description">Indonesian</span>
    Indonesian
  </div>
  <div class="item" data-percent="12" data-value="lt" data-english="Lithuanian">
    <span class="description">Lietuvių</span>
    Lithuanian
  </div>
  <div class="item" data-percent="11" data-value="tr" data-english="Turkish">
    <span class="description">Türkçe</span>
    Turkish
  </div>
  <div class="item" data-percent="10" data-value="kr" data-english="Korean">
    <span class="description">한국어</span>
    Korean
  </div>
  <div class="item" data-percent="7"  data-value="ar" data-english="Arabic">
    <span class="description">العربية</span>
    Arabic
  </div>
  <div class="item" data-percent="6"  data-value="hu" data-english="Hungarian">
    <span class="description">Magyar</span>
    Hungarian
  </div>
  <div class="item" data-percent="6"  data-value="vi" data-english="Vietnamese">
    <span class="description">tiếng Việt</span>
    Vietnamese
  </div>
  <div class="item" data-percent="5"  data-value="sv" data-english="Swedish">
    <span class="description">svenska</span>
    Swedish
  </div>
  <div class="item" data-precent="4"  data-value="pl" data-english="Polish">
    <span class="description">polski</span>
    Polish
  </div>
  <div class="item" data-percent="6"  data-value="ja" data-english="Japanese">
    <span class="description">日本語</span>
    Japanese
  </div>
  <div class="item" data-percent="0"  data-value="ro" data-english="Romanian">
    <span class="description">românește</span>
    Romanian
  </div>
</div>

          </div>
        </div>
      </div>

      
<!--       <a href="/module.html" class="ui right floated basic right labeled icon button">
        Learn about Modules
        <i class="help icon" data-title="What are Modules?" data-content="Modules are UI elements that include behaviors as part of their definition. Modules require some knowledge of Javascript to use."></i>
      </a> -->
      
      
      
      <div class="ui download primary button">
        Download
      </div>
      <div class="ui flowing download basic popup">
        <div class="ui divided equal width relaxed center aligned choice grid">
          <div class="framework column">
            <h4 class="ui center aligned header">UI Framework</h4>
            <div class="ui list">
              <div class="item"><i class="green check icon"></i> Themable</div>
              <div class="item"><i class="green check icon"></i> Build Tools</div>
            </div>
            <div class="ui primary fluid button">Choose</div>
          </div>
          <div class="standalone column">
            <h4 class="ui center aligned header">Standalone</h4>
            <div class="ui list">
              <div class="item">Default Theme</div>
              <div class="item">Precompiled</div>
            </div>
            <div class="ui fluid button basic">Choose</div>
          </div>
        </div>
        <div class="ui divided equal height relaxed center aligned framework grid">
          <div class="column">
            <div class="ui header">Semantic UI</div>
            <a class="ui primary button" href="https://github.com/Semantic-Org/Semantic-UI/archive/master.zip">
              Download ZIP
            </a>
            <a class="ui button" href="/introduction/getting-started.html">Getting Started</a>
            <h4 class="ui header">Package Managers</h4>
            <div class="ui form">
              <div class="field">
                <label>NPM</label>
                <div class="ui fluid input">
                  <input type="text" readonly="readonly" placeholder="Copy Link" value="npm install semantic-ui">
                </div>
              </div>
              <div class="field">
                <label>Git</label>
                <div class="ui fluid input">
                  <input type="text" readonly="readonly" placeholder="Copy Link" value="https://github.com/Semantic-Org/Semantic-UI.git">
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="ui divided equal height relaxed center aligned standalone grid">
          <div class="column">
            <div class="ui header">Standalone Search</div>
            <a class="ui primary button" href="https://github.com/Semantic-Org/UI-Search/archive/master.zip">
              Download ZIP
            </a>
            <a class="ui button" href="https://github.com/Semantic-Org/UI-Search/">
              View GitHub
            </a>
            <h4 class="ui header">Package Managers</h4>
            <div class="ui form">
              <div class="field">
                <label>Bower</label>
                <div class="ui fluid input">
                  <input type="text" readonly="readonly" placeholder="Copy Link" value="bower install semantic-ui-search">
                </div>
              </div>
              <div class="field">
                <label>NPM</label>
                <div class="ui fluid input">
                  <input type="text" readonly="readonly" placeholder="Copy Link" value="npm install semantic-ui-search">
                </div>
              </div>
              <div class="field">
                <label>Git</label>
                <div class="ui fluid input">
                  <input type="text" readonly="readonly" placeholder="Copy Link" value="https://github.com/Semantic-Org/UI-Search.git">
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      
    </div>
    <div class="advertisement">
      
      <script async type="text/javascript" src="//cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=semanticuicom" id="_carbonads_js"></script>
      
    </div>
    
    
    
    
    
      
        
      
        
      
        
      
        
      
      <div class="ui four item stackable tabs menu">
        
          <a class="active item" data-tab="definition">Definition</a>
          
        
          <a class="item" data-tab="examples">Examples</a>
          
        
          <a class="item" data-tab="usage">Usage</a>
          
        
          <a class="item" data-tab="settings">Settings</a>
          
        
      </div>
    
  </div>
</div>

  <script src="//m.servedby-buysellads.com/monetization.js" type="text/javascript"></script>
  <div class="bsa-cpc"></div>
  <script>
    (function(){
      if(typeof _bsa !== 'undefined' && _bsa) {
      _bsa.init('default', 'CVAIKK7I', 'placement:semanticuicom', {
        target: '.bsa-cpc',
        align: 'horizontal',
        disable_css: 'true'
      });
        }
    })();
  </script>
  <div class="ui vertical beg transition hidden segment">
    <i class="large red delete link icon"></i>
    <div class="ui red header">
      <i class="disabled warning sign icon"></i>
      <div class="content">
        Want to Support Open Source? Whitelist Your Ad-Blocker.
        <div class="sub header">
          We promise to not show more than one small ad per page. Dont worry, hiding this message will make sure you won't get nagged again.
        </div>
      </div>
    </div>
  </div>



<div class="main ui container">

  <div class="ui active tab" data-tab="definition">

    <h2 class="ui dividing header">Types</h2>

    <div class="standard example">
      <h4 class="ui header">Standard</h4>
      <p>A search can display a set of results</p>
      <div class="ui search">
        <input class="prompt" type="text" placeholder="Common passwords...">
        <div class="results"></div>
      </div>
    </div>

    <div class="another standard example">
      <div class="ui ignored info message">
        Using a <a href="/elements/input.html">ui input</a> allows you to use additional input types, like this icon input
      </div>
      <div class="ui search">
        <div class="ui icon input">
          <input class="prompt" type="text" placeholder="Common passwords...">
          <i class="search icon"></i>
        </div>
        <div class="results"></div>
      </div>
    </div>


    <div class="category example">
      <h4 class="ui header">Category</h4>
      <p>A search can display results from remote content ordered by categories</p>
      <div class="ui category search">
        <div class="ui icon input">
          <input class="prompt" type="text" placeholder="Search animals...">
          <i class="search icon"></i>
        </div>
        <div class="results"></div>
      </div>
    </div>


    <div class="local example">
      <h4 class="ui header">Local Search</h4>
      <p>A search can look for results inside a static local source.</p>
      <div class="ui ignored info message">
        By default, results will return content first that begin with the query text, but also afterward content that matches the query anywhere inside. To disable full text search you can specify in settings <code>fullTextSearch: false</code>.
      </div>
      <div class="ui search">
        <div class="ui icon input">
          <input class="prompt" type="text" placeholder="Search countries...">
          <i class="search icon"></i>
        </div>
        <div class="results"></div>
      </div>
      <div class="code" data-type="javascript">
        $('.ui.search')
          .search({
            source: content
          })
        ;
      </div>
      <div class="hidden code" data-type="javascript">
      var content = [
        { title: 'Andorra' },
        { title: 'United Arab Emirates' },
        { title: 'Afghanistan' },
        { title: 'Antigua' },
        { title: 'Anguilla' },
        { title: 'Albania' },
        { title: 'Armenia' },
        { title: 'Netherlands Antilles' },
        { title: 'Angola' },
        { title: 'Argentina' },
        { title: 'American Samoa' },
        { title: 'Austria' },
        { title: 'Australia' },
        { title: 'Aruba' },
        { title: 'Aland Islands' },
        { title: 'Azerbaijan' },
        { title: 'Bosnia' },
        { title: 'Barbados' },
        { title: 'Bangladesh' },
        { title: 'Belgium' },
        { title: 'Burkina Faso' },
        { title: 'Bulgaria' },
        { title: 'Bahrain' },
        { title: 'Burundi' }
        // etc
      ];
      </div>
    </div>


    <div class="local-category example">
      <h4 class="ui header">
        Local Category Search
        <div class="ui teal label">New in 2.3</div>
      </h4>
      <p>A search can look for category results inside a static local source.</p>
      <div class="ui ignored info message">
        By default, results will return content first that begin with the query text, but also afterward content that matches the query anywhere inside. To disable full text search you can specify in settings <code>fullTextSearch: false</code>.
      </div>
      <div class="ui search">
        <div class="ui icon input">
          <input class="prompt" type="text" placeholder="Search countries...">
          <i class="search icon"></i>
        </div>
        <div class="results"></div>
      </div>
      <div class="code" data-type="javascript">
        $('.ui.search')
          .search({
            type: 'category',
            source: categoryContent
          })
        ;
      </div>
      <div class="hidden code" data-type="javascript">
      var categoryContent = [
        { category: 'South America', title: 'Brazil' },
        { category: 'South America', title: 'Peru' },
        { category: 'North America', title: 'Canada' },
        { category: 'Asia', title: 'South Korea' },
        { category: 'Asia', title: 'Japan' },
        { category: 'Asia', title: 'China' },
        { category: 'Europe', title: 'Denmark' },
        { category: 'Europe', title: 'England' },
        { category: 'Europe', title: 'France' },
        { category: 'Europe', title: 'Germany' },
        { category: 'Africa', title: 'Ethiopia' },
        { category: 'Africa', title: 'Nigeria' },
        { category: 'Africa', title: 'Zimbabwe' },
      ];
      </div>
    </div>

    <!-- Coming in 2.2

    <div class="local example">
      <h4 class="ui header">Selection</h4>
      <p>A search can used inside a form to store a selection</p>
      <div class="ui ignored info message">
        <p>Search selections are identical to normal search elements but include an addition hidden input for storing the currently selected value for a form. They are also formatted to match selection styles found in other form components.</p>
        <p>Search selections allow for a function similar to <a href="/modules/dropdown.html#selection">search selection dropdowns</a> and can be used to store an input value retrieved remotely. Selections can use either local or remote content sources.</p>
      </div>
      <div class="ui search selection">
        <input type="hidden">
        <div class="ui icon input">
          <input class="prompt" type="text" placeholder="Search countries...">
          <i class="remove icon"></i>
        </div>
        <div class="results"></div>
      </div>
      <div class="code" data-type="javascript">
        $('.ui.search')
          .search{
            source: countries
          })
        ;
      </div>
    </div>

    <div class="another local example">
      <div class="ui search selection">
        <input type="hidden">
        <div class="ui icon input">
          <input class="prompt" type="text" placeholder="Search countries...">
          <i class="search icon"></i>
          <i class="remove icon"></i>
        </div>
        <div class="results"></div>
      </div>
    </div>

    <div class="another local example">
      <div class="ui search selection">
        <input type="hidden">
        <div class="ui left icon input">
          <input class="prompt" type="text" placeholder="Search countries...">
          <i class="search icon"></i>
          <i class="remove icon"></i>
        </div>
        <div class="results"></div>
      </div>
    </div> -->

    <h2 class="ui dividing header">States</h2>
    <div class="example">
      <h4 class="ui header">Loading</h4>
      <p>A search can show a loading indicator</p>
      <div class="ui loading search">
        <div class="ui icon input">
          <input class="prompt" type="text" placeholder="Search...">
          <i class="search icon"></i>
        </div>
        <div class="results"></div>
      </div>
    </div>

    <h2 class="ui dividing header">Variations</h2>

    <div class="category example">
      <h4 class="ui header">
        Disabled
        <div class="ui teal label">New in 2.3.1</div>
      </h4>
      <p>A search can show it is currently unable to be interacted with</p>
      <div class="ui disabled category search">
        <div class="ui icon input">
          <input class="prompt" type="text" placeholder="Search animals...">
          <i class="search icon"></i>
        </div>
        <div class="results"></div>
      </div>
    </div>

    <div class="category example">
      <h4 class="ui header">Fluid</h4>
      <p>A search can have its results take up the width of its container</p>
      <div class="ui fluid category search">
        <div class="ui icon input">
          <input class="prompt" type="text" placeholder="Search animals...">
          <i class="search icon"></i>
        </div>
        <div class="results"></div>
      </div>
    </div>

    <div class="category example">
      <h4 class="ui header">Aligned</h4>
      <p>A search can have its results aligned to its left or right container edge</p>
      <div class="ui right aligned category search">
        <div class="ui icon input">
          <input class="prompt" type="text" placeholder="Search animals...">
          <i class="search icon"></i>
        </div>
        <div class="results"></div>
      </div>
    </div>

  </div>

  <div class="ui tab" data-tab="usage">

    <h2 class="ui dividing header">Initializing</h2>

    <div class="ui message">
      Search is built ontop of Semantic <a href="/behaviors/api.html">API</a> behaviors to allow for URL templating, and UI state management. Please check out the API documentation for more information on adjusting API settings.
    </div>

    <h4 class="ui header">Automatic Routing</h4>
    <p>By default search will automatically route to the named <a href="/behaviors/api.html">API endpoint</a> 'search'</p>
    <div class="code" data-label="javascript">
      // initializes with default endpoint /search/{query}
      $('.ui.search')
        .search({
          type: 'category'
        })
      ;
    </div>

    <h4 class="ui header">Named URL</h4>
    <p>You can specify custom API settings to adjust the url, callback settings, or specify a different API action.</p>
    <div class="code" data-label="javascript">

      $('.ui.search')
        .search({
          // change search endpoint to a custom endpoint by manipulating apiSettings
          apiSettings: {
            url: 'custom-search/?q={query}'
          },
          type: 'category'
        })
      ;
    </div>

    <h4 class="ui header">Local Object</h4>
    <p>Local search results allow you to search across specified properties of a javacript object literal looking for matching values</p>
    <p>
      You can set which fields are searchable using the <code>searchFields</code> setting. Local object search can only display standard search results (not categories).
    </p>
    <div class="code" data-label="javascript">
      // searches across any array/object of searchable objects
      var
        content = [
          {
            title: 'Horse',
            description: 'An Animal',
          },
          {
            title: 'Cow',
            description: 'Another Animal',
          }
        ]
      ;
      $('.ui.search')
        .search({
          source : content,
          searchFields   : [
            'title'
          ],
          fullTextSearch: false
        })
      ;
    </div>

    <h2 class="ui dividing header">Server Responses</h2>

    <div class="ui info message">You may also consider adding a top level property like <code>success: true</code> and using API's <code>successTest</code> parameter to determine whether a server response is actually succesful, even if it returns the correct HTTP code</div>

    <h4 class="ui header">Standard</h4>
    <div class="code" data-title="Server JSON Response">
      {
        "results": [
          {
            "title": "Result Title",
            "url": "/optional/url/on/click",
            "image": "optional-image.jpg",
            "price": "Optional Price",
            "description": "Optional Description"
          },
          {
            "title": "Result Title",
            "description": "Result Description"
          }
        ],
        // optional action below results
        "action": {
          "url": '/path/to/results',
          "text": "View all 202 results"
        }
      }
    </div>


    <h4 class="ui header">Category</h4>
    <div class="code" data-title="Server JSON Response">
      {
        "results": {
          "category1": {
            "name": "Category 1",
            "results": [
              {
                "title": "Result Title",
                "url": "/optional/url/on/click",
                "image": "optional-image.jpg",
                "price": "Optional Price",
                "description": "Optional Description"
              },
              {
                "title": "Result Title",
                "url": "/optional/url/on/click",
                "image": "optional-image.jpg",
                "price": "Optional Price",
                "description": "Optional Description"
              }
            ]
          },
          "category2": {
            "name": "Category 2",
            "results": [
              {
                "title": "Result Title",
                "url": "/optional/url/on/click",
                "image": "optional-image.jpg",
                "price": "Optional Price",
                "description": "Optional Description"
              }
            ]
          }
        },
        // optional action below results
        "action": {
          "url": '/path/to/results',
          "text": "View all 202 results"
        }
      }
    </div>


    <h2 class="ui dividing header">Retreiving Results</h2>

    <h4 class="ui header">Unique IDs</h4>
    <p>If no <code>id</code> property is included on a result, a key will automatically be generated when your results are returned for each result.</p>
    <p>IDs are generated using the position in the results, for example the first element will receive the id <code>1</code>, and the first category result will receive the id <code>a1</code>.</p>
    <p>An <code>id</code> or search result title can then be used with <code>get result(value)</code> to return the result object.
    </p>
    <div class="code" data-label="javascript">
      // get result from current query results with the title cat
      $('.ui.search')
        .search('get result', 'cat')
      ;
      // get first result from first category with category search
      $('.ui.search')
        .search('get result', 'a1')
      ;
      // get first result from standard search
      $('.ui.search')
        .search('get result', '1')
      ;
    </div>


    <h2 class="ui dividing header">Behaviors</h2>

    <p>All the following behaviors can be called using the syntax:</p>
    <div class="code">
    $('.your.element')
      .search('behavior name', argumentOne, argumentTwo)
    ;
    </div>

    <table class="ui definition celled sortable table segment">
      <thead>
        <th>Behavior</th>
        <th>Description</th>
      </thead>
      <tbody>
        <tr>
          <td>query (callback)</td>
          <td>Search for value currently set in search input</td>
        </tr>
        <tr>
          <td>display message(text, type)</td>
          <td>Displays message in search results with text, using template matching type</td>
        </tr>
        <tr>
          <td>cancel query</td>
          <td>Cancels current remote search query</td>
        </tr>
        <tr>
          <td>search local(query)</td>
          <td>Search local object for specified query and display results</td>
        </tr>
        <tr>
          <td>has minimum characters</td>
          <td>Whether has minimum characters</td>
        </tr>
        <tr>
          <td>search remote(query, callback)</td>
          <td>Search remote endpoint for specified query and display results</td>
        </tr>
        <tr>
          <td>search object(query, object, searchFields)</td>
          <td>Search object for specified query and return results</td>
        </tr>
        <tr>
          <td>cancel query</td>
          <td>Cancels current remote search request</td>
        </tr>
        <tr>
          <td>is focused</td>
          <td>Whether search is currently focused</td>
        </tr>
        <tr>
          <td>is visible</td>
          <td>Whether search results are visible</td>
        </tr>
        <tr>
          <td>is empty</td>
          <td>Whether search results are empty</td>
        </tr>
        <tr>
          <td>get value</td>
          <td>Returns current search value</td>
        </tr>
        <tr>
          <td>get result(value)</td>
          <td>Returns JSON object matching searched title or id (see above)</td>
        </tr>
        <tr>
          <td>set value(value)</td>
          <td>Sets search input to value</td>
        </tr>
        <tr>
          <td>read cache(query)</td>
          <td>Reads cached results for query</td>
        </tr>
        <tr>
          <td>clear cache(query)</td>
          <td>Clears value from cache, if no parameter passed clears all cache</td>
        </tr>
        <tr>
          <td>write cache(query)</td>
          <td>Writes cached results for query</td>
        </tr>
        <tr>
          <td>add results(html)</td>
          <td>Adds HTML to results and displays</td>
        </tr>
        <tr>
          <td>show results(callback)</td>
          <td>Shows results container</td>
        </tr>
        <tr>
          <td>hide results(callback)</td>
          <td>Hides results container</td>
        </tr>
        <tr>
          <td>generate results(response)</td>
          <td>Generates results using parser specified by <code>settings.template</code></td>
        </tr>
        <tr>
          <td>destroy</td>
          <td>Removes all events</td>
        </tr>
      </tbody>
    </table>


  </div>

  <div class="ui tab" data-tab="examples">

    <h2 class="ui dividing header">Examples</h2>

    <div class="mapping example">
      <h4 class="ui header">Using Different Response Fields</h4>
      <p>Search expects a very specific API response, however you can easily modify the mapping of server response to displayed field using the <code>fields</code> parameter.
      <div class="ui ignored code">
      $('.ui.search')
        .search({
          apiSettings: {
            url: '//api.github.com/search/repositories?q={query}'
          },
          fields: {
            results : 'items',
            title   : 'name',
            url     : 'html_url'
          },
          minCharacters : 3
        })
      ;
      </div>
      <div class="ui search">
        <div class="ui left icon input">
          <input class="prompt" type="text" placeholder="Search GitHub">
          <i class="github icon"></i>
        </div>
      </div>
    </div>

    <div class="external example">
      <h4 class="ui header">Using API Settings</h4>
      <p><a href="/behaviors/api.html">API</a> provides a callback <a href="/behaviors/api.html#response-callbacks"><code>onResponse</code></a> that can be used to restructure third party APIs to match the expected server response for search.</p>
      <p>You can also use <a href="/behaviors/api.html#mocking-responses"><code>mockResponseAsync</code></a> to use a custom backend for fullfilling searches.</p>
      <div class="ui search">
        <div class="ui left icon input">
          <input class="prompt" type="text" placeholder="Search GitHub">
          <i class="github icon"></i>
        </div>
      </div>
      <div class="ignored code" data-type="javascript">
      $('.ui.search')
        .search({
          type          : 'category',
          minCharacters : 3,
          apiSettings   : {
            onResponse: function(githubResponse) {
              var
                response = {
                  results : {}
                }
              ;
              // translate GitHub API response to work with search
              $.each(githubResponse.items, function(index, item) {
                var
                  language   = item.language || 'Unknown',
                  maxResults = 8
                ;
                if(index >= maxResults) {
                  return false;
                }
                // create new language category
                if(response.results[language] === undefined) {
                  response.results[language] = {
                    name    : language,
                    results : []
                  };
                }
                // add result to category
                response.results[language].results.push({
                  title       : item.name,
                  description : item.description,
                  url         : item.html_url
                });
              });
              return response;
            },
            url: '//api.github.com/search/repositories?q={query}'
          }
        })
      ;
      </div>
    </div>
  </div>

  <div class="ui tab" data-tab="settings">
    <h2 class="ui dividing header">
      Search
    </h2>

    <h4 class="ui header">
      Behavior
    </h4>
    <table class="ui sortable celled definition table">
      <thead>
        <th class="three wide"></th>
        <th class="five wide">Default</th>
        <th>Description</th>
      </thead>
      <tbody>
        <tr>
          <td>apiSettings</td>
          <td>
          <div class="code">
          {
            action: 'search'
          }
          </div>
          </td>
          <td>Settings for <a href="/behaviors/api.html#/usage">API</a> call.</td>
        </tr>
        <tr>
          <td>minCharacters</td>
          <td>1</td>
          <td>Minimum characters to query for results</td>
        </tr>
        <tr>
          <td>searchOnFocus</td>
          <td>true</td>
          <td>Whether search should show results on focus (must also match min character length)</td>
        </tr>
        <tr>
          <td>transition</td>
          <td>
            fade
          </td>
          <td>Named transition to use when animating menu in and out. Fade and slide down are available without including <a href="/modules/transition.html">ui transitions</a></td>
        </tr>
        <tr>
          <td>duration</td>
          <td>
            300
          </td>
          <td>Duration of animation events</td>
        </tr>
        <tr>
          <td>maxResults</td>
          <td>7</td>
          <td>Maximum results to display when using local and simple search, maximum category count for category search</td>
        </tr>
        <tr>
          <td>cache</td>
          <td>true</td>
          <td>Caches results locally to avoid requerying server</td>
        </tr>
        <tr>
          <td>source</td>
          <td>false</td>
          <td>Specify a Javascript object which will be searched locally</td>
        </tr>
        <tr>
          <td>selectFirstResult</td>
          <td>false</td>
          <td>Whether the search should automatically select the first search result after searching</td>
        </tr>
        <tr>
          <td>showNoResults</td>
          <td>false</td>
          <td>Whether a "no results" message should be shown if no results are found. (These messages can be modified using the <code>template</code> object specified below)</td>
        </tr>
        <tr>
          <td>fullTextSearch</td>
          <td>'exact'</td>
          <td>Specifying to "true" will use a fuzzy full text search, setting to "exact" will force the exact search to be matched somewhere in the string, setting to <code>false</code> will only match to start of string. (This setting was previously called <code>searchFullText</code>.)</td>
        </tr>
        <tr>
          <td>fields</td>
          <td>
            <div class="code" data-type="css">
            fields: {
              categories      : 'results',     // array of categories (category view)
              categoryName    : 'name',        // name of category (category view)
              categoryResults : 'results',     // array of results (category view)
              description     : 'description', // result description
              image           : 'image',       // result image
              price           : 'price',       // result price
              results         : 'results',     // array of results (standard)
              title           : 'title',       // result title
              action          : 'action',      // "view more" object name
              actionText      : 'text',        // "view more" text
              actionURL       : 'url'          // "view more" url
            }
            </div>
          </td>
          <td>List mapping display content to JSON property, either with API or <code>source</code>.</td>
        </tr>
        <tr>
          <td>searchFields</td>
          <td>
            <div class="code" data-type="javascript">
              [
                'title',
                'description'
              ]
            </div>
          </td>
          <td>Specify object properties inside local source object which will be searched</td>
        </tr>
        <tr>
          <td>hideDelay</td>
          <td>0</td>
          <td>Delay before hiding results after search blur</code></td>
        </tr>
        <tr>
          <td>searchDelay</td>
          <td>100</td>
          <td>Delay before querying results on inputchange</td>
        </tr>
        <tr>
          <td>easing</td>
          <td>
            easeOutExpo
          </td>
          <td>Easing equation when using fallback Javascript animation</td>
        </tr>
      </tbody>
    </table>

    <h4 class="ui header">
      Callbacks
    </h4>

    <table class="ui sortable celled definition table">
      <thead>
        <th class="three wide"></th>
        <th class="three wide">Context</th>
        <th>Description</th>
      </thead>
      <tbody>
        <tr>
          <td>onSelect(result, response)</td>
          <td>module</td>
          <td>Callback on element selection by user. The first parameter includes the filtered response results for that element. The function should return false to prevent default action (closing search results and selecting value).</td>
        </tr>
        <tr>
          <td>onResultsAdd(html)</td>
          <td>module</td>
          <td>Callback after processing element template to add HTML to results. Function should return false to prevent default actions.</td>
        </tr>
        <tr>
          <td>onSearchQuery(query)</td>
          <td>module</td>
          <td>Callback on search query</td>
        </tr>
        <tr>
          <td>onResults(response)</td>
          <td>module</td>
          <td>Callback on server response</td>
        </tr>
        <tr>
          <td>onResultsOpen</td>
          <td>results element</td>
          <td>Callback when results are opened</td>
        </tr>
        <tr>
          <td>onResultsClose</td>
          <td>results element</td>
          <td>Callback when results are closed</td>
        </tr>
      </tbody>
    </table>

    <h2 class="ui dividing header">
      Templates
    </h2>

    <p>These templates are used to generate the HTML structures for search results</p>

    <div class="ui ignored info message">
      By specifying a search as <code>type: 'customType'</code>, and a custom template under <code>$.fn.search.settings.templates.customType</code> you can create custom search results. Keep in mind that <code>.title</code> will be used for matching results <code>onSelect</code>
    </div>
     <table class="ui sortable celled definition table">
      <thead>
        <th></th>
        <th class="twelve wide">Functions</th>
      </thead>
        <tr>
          <td>templates</td>
          <td>
            <div class="code" data-type="css">
            $.fn.search.settings.templates : {
              escape: function(string) {
                // returns escaped string for injected results
              },
              message: function(message, type) {
               // returns html for message with given message and type
              },
              category: function(response) {
               // returns results html for category results
              },
              standard: function(response) {
               // returns results html for standard results
              }
            }
            </div>
          </td>
        </tr>
      </tbody>
    </table>

    <h2 class="ui dividing header">
      Module
    </h2>

    <p>These settings are native to all modules, and define how the component ties content to DOM attributes, and debugging settings for the module.</p>

    <table class="ui sortable celled definition table">
      <thead>
        <th></th>
        <th class="six wide">Default</th>
        <th>Description</th>
      </thead>
      <tbody>
        <tr>
          <td>name</td>
          <td>Search</td>
          <td>Name used in log statements</td>
        </tr>
        <tr>
          <td>namespace</td>
          <td>search</td>
          <td>Event namespace. Makes sure module teardown does not effect other events attached to an element.</td>
        </tr>
        <tr>
          <td>regExp</td>
          <td>
            <div class="code" data-type="css">
            regExp: {
              escape     : /[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g,
              beginsWith : '(?:\s|^)'
            }
            </div>
          </td>
          <td>Regular expressions used for matching</td>
        </tr>
        <tr>
          <td>selector</td>
          <td>
            <div class="code" data-type="css">
            selector : {
              prompt       : '.prompt',
              searchButton : '.search.button',
              results      : '.results',
              category     : '.category',
              result       : '.result'
            }
            </div>
          </td>
          <td>Selectors used to find parts of a module</td>
        </tr>
        <tr>
          <td>metadata</td>
          <td>
            <div class="code">
            metadata: {
              cache   : 'cache',
              results : 'results'
            }
            </div>
          </td>
          <td>HTML5 metadata attributes used internally</td>
        </tr>
        <tr>
          <td>className</td>
          <td>
            <div class="code">
            className: {
              active  : 'active',
              empty   : 'empty',
              focus   : 'focus',
              loading : 'loading',
              pressed : 'down'
            }
            </div>
          </td>
          <td>Class names used to determine element state</td>
        </tr>
        <tr>
          <td>silent</td>
          <td>False</td>
          <td>Silences all console output including error messages, regardless of other debug settings.</td>
        </tr>
        <tr>
          <td>debug</td>
          <td>false</td>
          <td>Debug output to console</td>
        </tr>
        <tr>
          <td>performance</td>
          <td>true</td>
          <td>Show <code>console.table</code> output with performance metrics</td>
        </tr>
        <tr>
          <td>verbose</td>
          <td>false</td>
          <td>Debug output includes all internal behaviors</td>
        </tr>
        <tr>
          <td>errors</td>
          <td colspan="2">
            <div class="code">
            error : {
              source      : 'Cannot search. No source used, and Semantic API module was not included',
              noResults   : 'Your search returned no results',
              logging     : 'Error in debug logging, exiting.',
              noTemplate  : 'A valid template name was not specified.',
              serverError : 'There was an issue with querying the server.',
              maxResults  : 'Results must be an array to use maxResults setting',
              method      : 'The method you called is not defined.'
            },
            </div>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</div>
        <div class="ui  vertical footer segment">
  <div class="ui center aligned container">
    <div class="ui stackable grid">
      <div class="three wide column">
        <h4 class="ui header">Community</h4>
        <div class="ui link list">
          <a class="item" href="https://www.transifex.com/organization/semantic-org/" target="_blank">Help Translate</a>
          <a class="item" href="https://github.com/Semantic-Org/Semantic-UI/issues" target="_blank">Submit an Issue</a>
          <a class="item" href="https://gitter.im/Semantic-Org/Semantic-UI" target="_blank">Join our Chat</a>
          <a class="item" href="/cla.html" target="_blank">CLA</a>
        </div>
      </div>
      <div class="three wide column">
        <h4 class="ui header">Network</h4>
        <div class="ui link list">
          <a class="item" href="https://github.com/Semantic-Org/Semantic-UI" target="_blank">GitHub Repo</a>
          <a class="item" href="http://forums.semantic-ui.com" target="_blank">User Forums</a>
          <a class="item" href="http://1.semantic-ui.com">1.x Docs</a>
          <a class="item" href="http://legacy.semantic-ui.com">0.x Docs</a>
        </div>
      </div>
      <div class="seven wide right floated column">
        <h4 class="ui header">Help Preserve This Project</h4>
        <p> Support for the continued development of Semantic UI comes directly from the community.</p>
        <form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top">
          <input type="hidden" name="cmd" value="_s-xclick">
          <input type="hidden" name="hosted_button_id" value="7ZAF2Q8DBZAQL">
          <button type="submit" class="ui large teal button">Donate Today</button>
        </form>
      </div>
    </div>
    <div class="ui section divider"></div>
    <img src="/images/logo.png" class="ui centered mini image">
    <div class="ui horizontal small divided link list">
      <a class="item" href="http://semantic-ui.mit-license.org/" target="_blank">Free & Open Source (MIT)</a>
    </div>
  </div>
</div>

      </div>
    </div>
  </div>
  <div class="ui basic language modal">
  <i class="close icon"></i>
  <div class="header">The <span class="name"></span> Translation Needs Your Help</div>
  <div class="image content">
    <div class="middle aligned image">
      <i class="world icon"></i>
    </div>
    <div class="description">
      <p>This translation is only <b><span class="complete"></span>%</b> complete!</p>
      <div class="ui inverted indicating progress">
        <div class="bar"></div>
      </div>
      <p>We need your help to make Semantic available to  people who speak your language.</p>
      <p>Our translation tools are easy to use and allow you to translate text without having to leave the site.
      </p>
    </div>
  </div>
  <div class="actions">
    <div class="ui inverted cancel button">No Thanks</div>
    <a href="https://github.com/Semantic-Org/Semantic-UI/wiki/Translating-Semantic-UI-Docs" target="_blank" class="ui inverted approve teal button">
      <i class="mail icon"></i>
      Help Translate
    </a>
  </div>
</div>

<div class="ui basic chinese modal">
  <i class="close icon"></i>
  <div class="header">Would you like to visit the mirror site?</div>
  <div class="image content">
    <div class="middle aligned image">
      <i class="question icon"></i>
    </div>
    <div class="description">
      <p>Semantic is available at <a href="http://www.semantic-ui.cn">semantic-ui.cn</a> a mirror site hosted inside China. This should make browsing much faster for those visiting from mainland China.
      </p>
    </div>
  </div>
  <div class="actions">
    <div class="ui inverted red cancel button">No Thanks</div>
    <a href="http://www.semantic-ui.cn" class="ui inverted green approve button">
      <i class="mail icon"></i>
      Yes, take me to the mirror
    </a>
  </div>
</div>
  <div class="ui demo page dimmer">
  <div class="content">
    <div class="center">
      <h2 class="ui inverted icon header">
        <i class="mail icon"></i>
        Dimmer Message
        <div class="sub header">Dimmer sub-header</div>
      </h2>
    </div>
  </div>
</div>
  <script>
window.less = {
  async        : true,
  environment  : 'production',
  fileAsync    : false,
  onReady      : false,
  useFileCache : true
};
</script>

<script src="/javascript/library/less.min.js"></script>


</body>
</html>
